<!--suppress JSValidateTypes -->
<template lang="pug">
q-date(v-model="selected_datetime" :mask="dateFormat" :options="dateOptions")
</template>

<script setup>

import {computed} from "vue";
import {format} from 'quasar'

const {pad} = format

const props = defineProps(['modelValue', 'startTime', 'endTime', 'excludeDate', 'includeDate', 'dateFormat'])

const emit = defineEmits(['update:modelValue'])

const selected_datetime = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const dateOptions = (date) => {
  const [year, month, day] = date.split('/')
  const _date = `${year}-${pad(month, 2)}-${pad(day, 2)}`
  if (props.startTime && _date < props.startTime.slice(0, 10)) return false
  if (props.endTime && _date > props.endTime.slice(0, 10)) return false
  if (props.excludeDate && props.excludeDate.includes(_date)) return false
  return !(props.includeDate && !props.includeDate.includes(_date));

}


const rules = [
  val => (val && val.length > 0) || '请选择日期时间'
]


</script>

<style scoped>

</style>